<template>
    <div class="order-report-detail-1">
        <el-button type="primary" size="small" @click="exportRport">导出</el-button>
        <div class='padding'></div>
        <div class="report-table-wrapper">
            <el-table
                :header-cell-style="headerCellStyle"
                size="small"
                :data="showList"
                border
                style="width: 100%"
                max-height="500"
            >
                <!-- <el-table-column prop="agentId" label="代理商ID" min-width="100"></el-table-column> -->
                <el-table-column prop="agentName" label="代理商名称" min-width="100" fixed></el-table-column>
                <el-table-column prop="companyName" label="商家名称" min-width="100" fixed></el-table-column>
                <el-table-column prop="address" label="商家地址" min-width="100"></el-table-column>
                <el-table-column prop="contact" label="联系人姓名" min-width="100"></el-table-column>
                <el-table-column prop="telPhone" label="联系电话" min-width="100"></el-table-column>
                <el-table-column prop="addServiceCompanyList" label="增值服务列表" min-width="120">
                    <template slot-scope="props">
                        <span v-for="(item, index) in props.row.addServiceCompanyList" :key="index">{{item.addServiceName}}，</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createtime" label="商家创建时间" min-width="100">
                    <template slot-scope="props">
                        <div>{{$F(props.row.createtime)}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="商家状态" min-width="100">
                    <template slot-scope="props">
                        <div v-show="props.row.status === 0">正常</div>
                        <div v-show="props.row.status === 1">停用</div>
                    </template>
                </el-table-column>
                <!-- 0正常 1停用 -->
                <el-table-column prop="expiredTime" label="商家授权到期时间" min-width="100">
                    <template slot-scope="props">
                        <div>{{$F(props.row.expiredTime)}}</div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import fileDownload from 'js-file-download'
import axios from 'axios'
export default {
    data: function () {
        return {
            showList: []
        }
    },
    components: {
    },
    props: {
        dialogVisible: null,
        beginCreatetime: null,
        endCreatetime: null,
        agentId: null
    },
    created () {
        this.getPage()
    },
    watch: {
        dialogVisible () {
            if (this.dialogVisible) {
                this.getPage()
            }
        }
    },
    methods: {
        exportRport () {
            let that = this
            axios
                .post(
                    this.$store.state.IP +
                    '/CompanyRoomTotal/exportcompanyRoomPointTotalDetail',
                    {
                        // data: {
                        //     }
                        agentId: this.agentId,
                        beginCreatetime: this.beginCreatetime,
                        endCreatetime: this.endCreatetime
                    },
                    {
                        responseType: 'blob',
                        headers: that.axiosDownloadHeaders()
                    }
                )
                .then(function (response) {
                    console.log(response)
                    if (
                        response.headers['content-type'] ===
                        'application/json;charset=UTF-8'
                    ) {
                        console.log('出错')
                        return
                    }
                    let fileName = decodeURIComponent(
                        response.headers['content-disposition']
                    )
                    fileName = fileName.substring(20)
                    if (
                        response.headers['content-type'] ===
                        'application/x-msdownload;charset=UTF-8'
                    ) {
                        fileDownload(response.data, fileName)
                    }
                })
                .catch(function (error) {
                    alert(error)
                })
        },
        getPage () {
            this.$http.post(this.$store.state.IP + '/CompanyRoomTotal/CompanyRoomPointTotalDetail', {
                agentId: this.agentId,
                beginCreatetime: this.beginCreatetime,
                endCreatetime: this.endCreatetime
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('调用point报表成功')
                    console.log(response.res)
                    this.showList = response.res
                    // this.totalNum = response.data.total
                }
                if (response.ret !== '0') {
                    console.log('调用point报表失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.order-report-detail-1
    width: 100%
    .padding
        width 100%
        height 25px
    .report-table-wrapper
        width 100%
</style>
